<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收支情况</title>
<!--    jquery引用-->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--    jquery-cookie 用于存储用户登录信息cookie-->
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<!--    index.html页面的css文件-->
    <link type="text/css" rel="stylesheet" href="css/index.css">
</head>
<body style="width: 100%;height: 100%">
<!--顶部导航栏-->
<div style="background-color: #252D47;height: 55px;color: white;width: 100%;margin: 0;padding: 0">
    <div class="systemname">经费管理系统</div>
    <div id="qk1" class="navs" style="background-color: #E01818">
        <a id="qk" class="navselect" href="#">收支情况</a>
    </div>
    <div id="qk2" class="navs">
        <a id="ls" class="navselect" href="#">收支历史</a>
    </div>
    <div id="qk3" class="navs">
        <a id="bd" class="navselect" href="#">收支比对</a>
    </div>
    <div id="qk4" class="navsp0">
        <span class="username" id="username">使用者</span>
    </div>
    <div id="qk5" class="navsp2">
<!--        高级权限用户管理-->
        <img id="avator" style="width: 35px;height: 35px;border-radius: 100%;margin-top: 10px" src="images/avator.png">
        <div id="loginout">
            <a href="#" id="zhuxiao" style="font-size: 14px;color: #828282">退出/注销</a>
        </div>
    </div>
    <div id="qk6" class="navsp1">
        <a style="color: white" id="yonghuguanli"  href="#">用户管理</a>
        <a style="color: white" id="yonghuguanlia">|</a>
    </div>
<!--    用户管理弹出框-->
    <div class="usermanagerdialog">

    </div>
<!--    用户管理表单-->
    <div class="userlisttable">
        <div style="width: 100%;height: 22px"><a onclick="usermanagerout()" style="float: right;color: #8F9292;margin-right: 5px;" href="#">✕</a></div>
        <div style="width: 100%;height: 32px">
            <button class="getuserexcel" onclick="getuserExcel()" style="color: #2D2F33;height: 32px;width: 118px;background-color: white;border: #CFD6E4 solid 1px;float: right;margin-right: 5%">导出用户信息</button>
        </div>
        <div>
            <div id="div">
                <div style="width: 100%;height: 48px;background-color: #F4F7FD;border-bottom: #DFE4ED solid 1px;border-radius: 5px">
                    <span style="color: #2D2F33;font-size: 22px;line-height: 48px;margin-left: 60px">用户修改</span>
                </div>
                <div style="width: 100%;height: 48px">
                    <div style="float: left;margin-left: 40px">
                        <span style="color: #2D2F33;font-size: 18px;line-height: 48px;">基本信息</span>
                    </div>
                </div>
                <div style="height: 32px;width: 100%;margin-top: 20px">
                    <div style="float: left">
                        <span class="xing" style="margin-left: 40px">*</span><span class="infor">用户名</span>
                        <input id="yname" oninput="if(value.length>7)value=value.slice(0,11)" type="text" class="inputzhuce" placeholder="请输入用户名" style="margin-left: 40px">
                    </div>
                    <div style="float: right">
                        <span class="xing">*</span><span class="infor" style="margin-right: 40px">姓名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <input id="zname" oninput="if(value.length>7)value=value.slice(0,11)" type="text" class="inputzhuce" placeholder="请输入姓名" style="margin-right: 40px;">
                    </div>
                </div>
                <div style="height: 32px;width: 100%;margin-top: 40px">
                    <div style="float: left">
                        <span class="xing" style="margin-left: 40px">*</span><span class="infor">密码&nbsp;&nbsp;&nbsp;</span>
                        <input id="ypassword0" oninput="if(value.length>7)value=value.slice(0,6)" type="password" class="inputzhuce" placeholder="请输入密码" style="margin-left: 40px">
                    </div>
                    <div style="float: right">
                        <span class="xing">*</span><span class="infor" style="margin-right: 40px">核对密码</span>
                        <input id="ypassword1" oninput="if(value.length>7)value=value.slice(0,6)" type="password" class="inputzhuce" placeholder="与上个密码保持一致" style="margin-right: 40px;">
                    </div>
                </div>
                <div style="height: 32px;width: 100%;margin-top: 40px">
                    <div style="float: left">
                        <span class="infor" style="margin-left: 40px">手机号&nbsp;</span>
                        <input id="yphone" oninput="if(value.length>7)value=value.slice(0,11)" type="number" class="inputzhuce" placeholder="请输入警号" style="margin-left: 40px">
                    </div>
                    <div style="float: right">
                        <span class="infor" style="margin-right: 40px">身份证号</span>
                        <input id="yid" oninput="if(value.length>7)value=value.slice(0,18)" type="text" class="inputzhuce" placeholder="请输入身份号" style="margin-right: 40px;">
                    </div>
                </div>
                <div style="width: 100%;height: 54px;border-top: #DFE4ED solid 1px;margin-top: 125px;">
                    <button onclick="zsubmint()"  class="enter" style="width: 62px;height: 32px;background-color: #2985F7;float: right;color: white;margin-top: 11px;margin-right: 20px">确认</button>
                    <button  class="exit" style="width: 62px;height: 32px;background-color: white;float: right;margin-top: 11px;margin-right: 10px">取消</button>
                </div>

            </div>
            <table id="usertable" style="border-collapse : collapse;margin-top: 10px;table-layout : fixed;width: 90%;margin-left: 5%">
                <tr class="tabhead" style="font-size: 16px;color: #A08D99;
                font-weight: 500;height: 50px;
                background-color: #ECF1F9;">
                    <td style="width: 120px;text-align: center;background-color: #E6E6FA">
                        <span>
                            姓名
                            <div style="margin-left: 120px;margin-top: -16px">
                            <div class="up" id="unameup"></div>
                                <div style="height: 2px"></div>
                            <div class="down" id="unamedown"></div>
                            </div>
                        </span>
                    </td>
                    <td style="width: 120px;text-align: center">
                        <span>
                            用户名
                            <div style="margin-left: 120px;margin-top: -16px">
                            <div class="up" id="ulognameup"></div>
                                <div style="height: 2px"></div>
                            <div class="down" id="ulognamedown"></div>
                            </div>
                        </span>
                    </td>
                    <td style="width: 150px;text-align: center">
                        <span>
                            身份证号
                            <div style="margin-left: 150px;margin-top: -16px">
                            <div class="up" id="uidnoup"></div>
                                <div style="height: 2px"></div>
                            <div class="down" id="uidnodown"></div>
                            </div>
                        </span>
                    </td>
                    <td style="width: 150px;text-align: center">
                        <span>
                            手机号
                            <div style="margin-left: 150px;margin-top: -16px">
                            <div class="up" id="upnoup"></div>
                                <div style="height: 2px"></div>
                            <div class="down" id="upnodown"></div>
                            </div>
                        </span>
                    </td>
                    <td style="width: 120px;text-align: center">操作</td>
                </tr>
            </table>
        </div>
<!--        用户管理分页组件-->
        <div id="pageu" style="margin-top: 10px;width: 100%;padding-bottom: 30px">
            <div style="margin-left: 5%;height: 26px;width: 300px;float: left;font-size: 14px;color: #2D2F33">
                共<span id="totaluser">0</span>条记录，当前显示第<span id="startuser">0</span>-<span id="enduser">0</span>条
            </div>
            <div class="pagebuttonu">
                <div id="perfixu" class="pbtpu">
                    <a href="#"><</a>
                </div>
                <div class="pbttu" style="width: 50px;height: 22px;color: #A08D99">
                </div>
                <div id="nextu" class="pbtpu">
                    <a href="#">></a>
                </div>
            </div>
        </div>
    </div>
</div>
<!--用于载入其他页面-->
<div id="content"></div>
</body>
<script>
    //统一的后端接口规范地址
    const ppath="http://localhost:8088/financeManager/";
    //用户管理分页用到的参数
    //用户管理当前页
    var currentu=1
    //用户管理四种排序方式
    var unamei=1  //1 名称降序 2 名称升序
    //用户管理总个数
    var totalu=0
    //用户管理总页数
    var totalpageu=1
    //用户管理每页个数
    var limitu=4
    //用户管理基于分页后的用户列表
    var userlist=null
    //用户管理编辑用到的tempid
    tempid=null
    //用户管理导出用户信息
    function getuserExcel(){
        window.location.href=ppath+"getuserExcel"//直接向后端接口发起请求
    }
    //界面加载触发的函数
    window.onload=function (){
        //从cookie中获取用户信息 用户id
        var userid=$.cookie('userid')
        if(userid=='error' || !userid){//这是没有登录的情况 将自动跳转到登录界面
            // document.location.replace("login.html")
            document.location.replace(ppath+"login")
            // $.ajax({//GET请求通过用户id 获取用户信息
            //     url: ppath+"login",
            //     type: "GET",
            //     async: false,
            //     dataType: "text",
            //     success: function (result) {
            //
            //     },
            //     error: function (res){//请求异常时的回调
            //         alert("没有该用户")
            //     }
            // });

        }else {//这是已经登录的情况  将进入收支情况界面
            $("#content").load("qingkuang.html")
            //获取用户信息 通过cookie中的用户id
            var  user={//用户对象
                id: null,
                userName: null,
                loginName: null,
                password: null,
                type: 2,
                idNo: null,
                phoneNo: null
            };
            $.ajax({//GET请求通过用户id 获取用户信息
                url: ppath+"getuserinfobyid/"+userid,
                type: "GET",
                async: false,
                dataType: "text",
                success: function (result) {
                    user=JSON.parse(result)
                    console.log('用户',user.userName)
                    //如果不是超级管理员  type=2时，该用户不是超级管理员
                    if(user.type==2){
                        $("#yonghuguanli").remove()//顶部”用户管理“标签不显示（移除）
                        $("#yonghuguanlia").remove()
                    }
                    $("#username").text(user.userName)//显示用户名称
                },
                error: function (res){//请求异常时的回调
                    alert("没有该用户")
                }
            });
        }
    }
    //防止jquery自启动 基于用户交互事件触发某些函数
    $(document).ready(function (){
        //单页面切换
        //收支情况
        $("#qk").click(function (){
            $("#qk1").css("background-color","#E01818")
            $("#qk2").css("background-color","#252D47")
            $("#qk3").css("background-color","#252D47")
            $("#content").load("qingkuang.html")
            $("title").text(function (){
                return "收支情况"//网站界面的顶部title相应改变
            })
        })
        //收支历史
        $("#ls").click(function (){
            $("#qk1").css("background-color","#252D47")
            $("#qk2").css("background-color","#E01818")
            $("#qk3").css("background-color","#252D47")
            $("#content").load("lishi.html")
            $("title").text(function (){
                return "收支历史"
            })
        })
        //收支比对
        $("#bd").click(function (){
            $("#qk1").css("background-color","#252D47")
            $("#qk2").css("background-color","#252D47")
            $("#qk3").css("background-color","#E01818")
            $("#content").load("bidui.html")
            $("title").text(function (){
                return "收支比对"
            })
        })

        //退出/注销 鼠标移入移出事件 触发”退出/注销"标签的显示与隐藏
        $("#qk5").mouseenter(function () {
            $("#loginout").show()
        })
        $("#qk5").mouseleave(function () {
            $("#loginout").hide()
        })
        $("#zhuxiao").click(function (){
            $.cookie('userid', 'error', { expires: 1, path: '/' });
            document.location.replace("login.html")
        })

        //用户管理弹窗显示
        $("#yonghuguanli").click(function () {
            $(".usermanagerdialog").show()
            $(".userlisttable").show()
        })
        //加载用户列表
        $("#usertable").after(function () {
            currentu=1
            loaddataofmanager()
            makepagesu()
        })
        //上一页
        $("#perfixu").click(function (){
            prefixu()
        })
        //下一页
        $("#nextu").click(function (){
            nextpu()
        })
        //退出用户编辑弹窗
        $(".exit").click(function(){
            $("#div").hide(200,"linear");
            tempid=null;
        });
        //姓名 用户名 身份证号 手机号 排序
        $("#unameup").click(function () {//姓名排序 升序 以下依次同理
            $("#unameup").css("border-bottom","6px solid #2985F7")
            $("#unamedown").css("border-top","6px solid #B4BCCC")
            unamei=2
            makepagesu()
        })
        $("#unamedown").click(function () {//用户名排序
            $("#unamedown").css("border-top","6px solid #2985F7")
            $("#unameup").css("border-bottom","6px solid #B4BCCC")
            unamei=1
            makepagesu()
        })
        $("#ulognameup").click(function () {
            $("#ulognameup").css("border-bottom","6px solid #2985F7")
            $("#ulognamedown").css("border-top","6px solid #B4BCCC")
        })
        $("#ulognamedown").click(function () {
            $("#ulognamedown").css("border-top","6px solid #2985F7")
            $("#ulognameup").css("border-bottom","6px solid #B4BCCC")
        })
        $("#uidnoup").click(function () {
            $("#uidnoup").css("border-bottom","6px solid #2985F7")
            $("#uidnodown").css("border-top","6px solid #B4BCCC")
        })
        $("#uidnodown").click(function () {
            $("#uidnodown").css("border-top","6px solid #2985F7")
            $("#uidnoup").css("border-bottom","6px solid #B4BCCC")
        })
        $("#upnoup").click(function () {
            $("#upnoup").css("border-bottom","6px solid #2985F7")
            $("#upnodown").css("border-top","6px solid #B4BCCC")
        })
        $("#upnodown").click(function () {
            $("#upnodown").css("border-top","6px solid #2985F7")
            $("#upnoup").css("border-bottom","6px solid #B4BCCC")
        })
    })
    //退出用户管理
    function usermanagerout() {
        $(".userlisttable").hide()
        $(".usermanagerdialog").hide()
    }
    //加载用户管理列表
    function loaddataofmanager(){
        $.ajax({
            url: ppath+"getalluser",
            type: "GET",
            async: false,
            dataType: "text",
            success: function (result) {
                userlist=JSON.parse(result)
                totalu=userlist.length
                //  总页数=总个数/limit (向上取整)
                totalpageu=Math.ceil(totalu/limitu)
                for(i=0;i<limitu;i++){
                    if(i%2==0){
                        $("#usertable").append("<tr class=\"tabheadu\" style=\"font-size: 14px;color: #2D2F33;\n" +
                            "                font-weight: 500;height: 50px;\n" +
                            "                background-color: white;\">\n" +
                            "                    <td style=\"width: 120px;text-align: center;background-color: #E6E6FA\">\n" +userlist[i].userName+
                            "                    </td>\n" +
                            "                    <td style=\"width: 120px;text-align: center\">" +userlist[i].loginName+
                            "</td>\n" +
                            "                    <td style=\"width: 150px;text-align: center\">" +userlist[i].idNo+
                            "</td>\n" +
                            "                    <td style=\"width: 150px;text-align: center\">" +userlist[i].phoneNo+
                            "                    </td>\n" +
                            "                    <td style=\"width: 120px;text-align: center\">\n" +
                            "                        <a  href=\"#\"" +"id='u"+i+"'"+"onclick='edituserdialog("+userlist[i].id+")'"+
                            ">编辑</a>\n" +
                            "                        <a href=\"#\">|</a>\n" +
                            "                        <a href=\"#\"" +"id='ud"+i+"'"+"onclick='deleteuser("+userlist[i].id+")'"+
                            ">删除</a>\n" +
                            "                    </td>\n" +
                            "                </tr>")
                    }else {
                        $("#usertable").append("<tr class=\"tabheadu\" style=\"font-size: 14px;color: #2D2F33;\n" +
                            "                font-weight: 500;height: 50px;\n" +
                            "                background-color: #ECF1F9;\">\n" +
                            "                    <td style=\"width: 120px;text-align: center;background-color: #E6E6FA\">\n" +userlist[i].userName+
                            "                    </td>\n" +
                            "                    <td style=\"width: 120px;text-align: center\">" +userlist[i].loginName+
                            "</td>\n" +
                            "                    <td style=\"width: 150px;text-align: center\">" +userlist[i].idNo+
                            "</td>\n" +
                            "                    <td style=\"width: 150px;text-align: center\">" +userlist[i].phoneNo+
                            "                    </td>\n" +
                            "                    <td style=\"width: 120px;text-align: center\">\n" +
                            "                        <a  href=\"#\"" +"id='u"+i+"'"+"onclick='edituserdialog("+userlist[i].id+")'"+
                            ">编辑</a>\n" +
                            "                        <a href=\"#\">|</a>\n" +
                            "                        <a href=\"#\"" +"id='ud"+i+"'"+"onclick='deleteuser("+userlist[i].id+")'"+
                            ">删除</a>\n" +
                            "                    </td>\n" +
                            "                </tr>")
                    }
                }
            },
            error: function (res){
                // alert("网络错误")
            }
        });




    }
    //用户管理分页插件 样式变化
    function makepagesu(){
        $(".pbtu").remove()
        for(i=1;i<totalpageu+1;i++){
            $(".pbttu").before("<div class=\"pbtu\"" +"id='pu"+i+"'"+
                ">\n" +
                "                    <a href=\"#\"" +"id='pau"+i+"'"+"onclick='topageu("+i+")'"+
                ">"+i+"</a>\n" +
                "                </div>")
        }
        $("#pu"+currentu).css("background-color","#2985F7")
        $("#pau"+currentu).css("color","#FFFFFF")
        $(".pbttu").text(currentu+"/"+totalpageu+"页")
        $(".tabheadu").remove()
        $("#totaluser").text(totalu)

        //调用后端分页查询接口
        $.ajax({
            url: ppath+"getuserbypage/"+limitu+"/"+currentu+"/"+unamei,
            type: "GET",
            async: false,
            dataType: "text",
            success: function (result) {
                userlist=JSON.parse(result)
                $("#startuser").text((currentu-1)*limitu+1)
                $("#enduser").text((currentu-1)*limitu+(userlist.length))
                for(i=0;i<userlist.length;i++){
                    if(i%2==0){
                        $("#usertable").append("<tr class=\"tabheadu\" style=\"font-size: 14px;color: #2D2F33;\n" +
                            "                font-weight: 500;height: 50px;\n" +
                            "                background-color: white;\">\n" +
                            "                    <td style=\"width: 120px;text-align: center;background-color: #E6E6FA\">\n" +userlist[i].userName+
                            "                    </td>\n" +
                            "                    <td style=\"width: 120px;text-align: center\">" +userlist[i].loginName+
                            "</td>\n" +
                            "                    <td style=\"width: 150px;text-align: center\">" +userlist[i].idNo+
                            "</td>\n" +
                            "                    <td style=\"width: 150px;text-align: center\">" +userlist[i].phoneNo+
                            "                    </td>\n" +
                            "                    <td style=\"width: 120px;text-align: center\">\n" +
                            "                        <a  href=\"#\"" +"id='u"+i+"'"+"onclick='edituserdialog("+userlist[i].id+")'"+
                            ">编辑</a>\n" +
                            "                        <a href=\"#\">|</a>\n" +
                            "                        <a href=\"#\"" +"id='ud"+i+"'"+"onclick='deleteuser("+userlist[i].id+")'"+
                            ">删除</a>\n" +
                            "                    </td>\n" +
                            "                </tr>")
                    }else {
                        $("#usertable").append("<tr class=\"tabheadu\" style=\"font-size: 14px;color: #2D2F33;\n" +
                            "                font-weight: 500;height: 50px;\n" +
                            "                background-color: #ECF1F9;\">\n" +
                            "                    <td style=\"width: 120px;text-align: center;background-color: #E6E6FA\">\n" +userlist[i].userName+
                            "                    </td>\n" +
                            "                    <td style=\"width: 120px;text-align: center\">" +userlist[i].loginName+
                            "</td>\n" +
                            "                    <td style=\"width: 150px;text-align: center\">" +userlist[i].idNo+
                            "</td>\n" +
                            "                    <td style=\"width: 150px;text-align: center\">" +userlist[i].phoneNo+
                            "                    </td>\n" +
                            "                    <td style=\"width: 120px;text-align: center\">\n" +
                            "                        <a  href=\"#\"" +"id='u"+i+"'"+"onclick='edituserdialog("+userlist[i].id+")'"+
                            ">编辑</a>\n" +
                            "                        <a href=\"#\">|</a>\n" +
                            "                        <a href=\"#\"" +"id='ud"+i+"'"+"onclick='deleteuser("+userlist[i].id+")'"+
                            ">删除</a>\n" +
                            "                    </td>\n" +
                            "                </tr>")
                    }

                }
            },
            error: function (res){
                // alert("没有该用户")
            }
        });

    }
    //分页方法
    //分页
    //上一页
    function prefixu(){
        if(currentu!=1){
            currentu=currentu-1
            makepagesu()
        }
    }
    //下一页
    function nextpu(){
        if(currentu!=totalpageu){
            currentu=currentu+1
            makepagesu()
        }
    }
    //到具体页
    function topageu(val){
        currentu=val
        makepagesu()
    }
    //用户编辑弹窗
    function edituserdialog(id) {
        tempid=id
        console.log("编辑弹窗用户id:",id)
        $("#div").show()
        //根据用户的id获取用户的信息
        var  user={
            id: null,
            userName: null,
            loginName: null,
            password: null,
            type: 2,
            idNo: null,
            phoneNo: null
        };
        $.ajax({
            url: ppath+"getuserinfobyid/"+id,
            type: "GET",
            async: false,
            dataType: "text",
            success: function (result) {
                user=JSON.parse(result)
                $("#zname").val(user.userName)
                $("#yname").val(user.loginName)
                $("#yphone").val(user.phoneNo)
                $("#yid").val(user.idNo)
                // user.password=$("#ypassword0").val()

            },
            error: function (res){
                // alert("没有该用户")
            }
        });
    }
    //用户修改
    function zsubmint(){
        var  user={
            id: null,
            userName: null,
            loginName: null,
            password: null,
            type: 2,
            idNo: null,
            phoneNo: null
        };
        var sf=$("#yid").val()
        var Expression=/^\d{17}[\d|X]$|^\d{15}$/;
        var objExp=new RegExp(Expression);
        //验证提示 str
        var mas=""
        if($("#yname").val().length==0){
            mas=mas+"用户名必填;"
        }
        if($("#zname").val().length==0){
            mas=mas+"姓名必填;"
        }
        if($("#ypassword0").val().length!=6 && $("#ypassword0").val().length>0){
            mas=mas+"密码必填6位;"
        }
        if($("#ypassword1").val().length!=6 && $("#ypassword1").val().length>0){
            mas=mas+"核对密码必填6位;"
        }
        if($("#yphone").val().length!=11 && $("#yphone").val().length>0){
            mas=mas+"手机号码长度应为11;"
        }
        if(objExp.test(sf)!=true && sf.length>0){
            mas=mas+"身份证号码格式有误;"
        }
        if($("#ypassword0").val()!=$("#ypassword1").val()){
            mas=mas+"两次密码不一致;"
        }
        if(mas.length>2){
            alert(mas)
        }
        if(mas.length<2){
            //提交注册表单
            user.id=tempid
            user.user_name=$("#zname").val()
            user.login_name=$("#yname").val()
            user.phone_no=$("#yphone").val()
            user.id_no=$("#yid").val()
            user.password=$("#ypassword0").val()
            $.ajax({
                url: ppath+"updateuser",
                type: "POST",
                async: false,
                contentType:"application/json;charset=UTF-8",
                data: JSON.stringify(user),
                // data: user,
                dataType: "text",
                success: function (result) {
                    if(result=='success'){
                        //修改成功
                        $("#div").hide()
                        topageu(currentu)
                        tempid=null
                    }else {
                        // alert("网络错误")
                    }
                },
                error: function (res){
                    // alert("网络错误")
                }
            })
        }
    }
    //用户删除
    function deleteuser(val) {
        $.ajax({
            url: ppath+"deleteuserbyid/"+val,
            type: "GET",
            async: false,
            dataType: "text",
            success: function (result) {
                if(result=='success'){
                    $("#usertable").after(function () {
                        // currentu=1
                        loaddataofmanager()
                        makepagesu()
                    })
                }else {
                    // alert("网络错误")
                }
            },
            error: function (res){
                // alert("没有该用户")
            }
        });
    }
</script>
<style>
</style>
</html>